import React, { Component } from 'react'
import { Table, TableCol } from './index'
import Button from './../button/button'
 
export default class TableDemo extends Component {
  constructor (props) {
    super(props)
    this.state = {
      tableData: [
        {
          name: 'a1',
          age: '1',
          height: '170',
          opera: '',
          id: 1
        },
        {
          name: 'a2',
          age: '2',
          height: '180',
          opera: '',
          id: 2
        }
      ]
    }
  }
  deleteData (data) {
    this.setState({
      tableData: this.state.tableData.filter(u => u.id !== data.id)
    })
  }
  render () {
    return (
      <div>
        <Table tableData={this.state.tableData}>
          <TableCol
            keyName="name"
            label="名字"
            renderFn={(data) => { return (<b>{data.name}</b>) }}>
          </TableCol>
          <TableCol
            keyName="age"
            label="年龄">
          </TableCol>
          <TableCol
            keyName="height"
            label="身高"
            renderFn={(data) => { return ( <Button type="primary">{data.height}</Button> ) }}>
          </TableCol>
          <TableCol
            keyName="opera"
            label="操作"
            renderFn={(data) => { return (
              <span>
                <a href="http://www.baidu.com">查看</a>
                <a onClick={this.deleteData.bind(this, data)}>删除</a>
            </span>) }}>
          </TableCol>
        </Table>
      </div>
    )
  }
}